<!DOCTYPE html>
<html>

<head>
	<title>{$title}</title>
    <meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
	<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="full-screen" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="address=no">
	
	<!-- import CSS -->
	<link rel="stylesheet" href="{$Think.config.site.resource_url}css/assets/style.css?11">
	<script src="{$Think.config.site.resource_url}js/assets/jquery.js"></script>

	<script>
        $(function(){
            $('.screen_a').click(function(){
                $('#screen').show();
                $('#screen_bg').show();
                $('html,body').addClass('ovfHiden'); //使网页不可滚动
            })
            $('.cancel').click(function(){
                $('#screen').hide();
                $('#screen_bg').hide();
                $('html,body').removeClass('ovfHiden'); //使网页恢复可滚
            })
        })
	</script>

</head>

<!--筛选弹窗-->
<div class="screen" id="screen">
	<div class="screen_main">
		<form action="/home/User/order" id="form" method="get">
			<input type="hidden" name="time" value="{$time}">
			<div class="binding_tit">商户名称：</div>
			<div class="binding_select"><input value="{$seller_name}"  placeholder="请输入商户名称" name="seller_name"></div>
			<div class="binding_tit">用户名称：</div>
			<div class="binding_select"><input value="{$user_name}"  placeholder="请输入用户名称" name="user_name"></div>
			<div class="binding_btn">
				<button class="state_confirm">确认</button>
				<button class="cancel">取消</button>
			</div>
		</form>
	</div>
</div>
<div id="screen_bg"></div>

<body>
<!-- 顶部 -->
<div class="head">
	<div class="head_back"><a href="/home/Index/index"><img src="{$Think.config.site.resource_url}images/assets/arrow.png"></a></div>
    <div class="head_txt">交易流水</div>
</div>

<div class="flow_btn">
	<a href="/home/User/order?time=1"><button class="<?php if ($time==1) { echo 'flow_btn1'; } else { echo 'flow_btn2';} ?>">今日</button></a>
	<a href="/home/User/order?time=2"><button class="<?php if ($time==2) { echo 'flow_btn1'; } else { echo 'flow_btn2';} ?>">本周</button></a>
	<a href="/home/User/order?time=3"><button class="<?php if ($time==3) { echo 'flow_btn1'; } else { echo 'flow_btn2';} ?>">本月</button></a>
	<button class="flow_btn3 screen_a">筛选</button>
</div>

<div class="flow_content">
	<div class="flow_head" style="height: 100px;">
		<div class="flow_head_left">
			<p>总交易额：{$amount_count}元</p>
			<p>实付总交易额：{$real_amount_count}元</p>
		</div>
		<div class="flow_head_right">总交易笔数：{$order_count}笔</div>
	</div>
	<div class="flow_list">
		<ul class="showMoreNChildren" pagesize="10">
			{volist name="orders" id="v"}
			<li>
				<div class="flow_txt">
					<p>订单号：{$v.order_no}</p>
					<p>交易用户：{$v.user_name}</p>
					<p>商户名称：{$v.seller_name}</p>
					<p>下单时间：{$v.create_time}</p>
					<p>计费周期：{$v.starttime} - {$v.endtime}</p>
				</div>
				<div class="flow_sp">
					<span class="flow_sp1">{$v.real_amount}元</span>
					<span class="flow_sp2">{}元/小时</span>
					<span class="flow_sp3">{$v.status}</span>
				</div>
				<a href="/home/User/orderDetail?id={$v.id}">查看详情</a>
			</li>
			{/volist}
		</ul>
	</div>
</div>

<div id='showMorehandle' ><span>已经到底了</span></div>

<div class="bottom">
	<ul>
		<li>
			<a href="/home/Index/index">
				<div class="bottom_img"><img src="{$Think.config.site.resource_url}images/assets/home_1.png"></div>
				<p>首页</p>
		    </a>
		</li>
		<li>
			<a href="/home/User/balance">
				<div class="bottom_img"><img src="{$Think.config.site.resource_url}images/assets/flow.png"></div>
				<p class="bottom_active">交易流水</p>
		    </a>
		</li>
		<li>
			<a href="/home/User/index">
				<div class="bottom_img"><img src="{$Think.config.site.resource_url}images/assets/my_1.png"></div>
				<p>个人中心</p>
		    </a>
		</li>
	</ul>
</div>

</body>
<script>
    (function () {
        var showMoreNChildren = function ($children, n) {
            //显示某jquery元素下的前n个隐藏的子元素
            var $hiddenChildren = $children.filter(":hidden");
            var cnt = $hiddenChildren.length;
            for ( var i = 0; i < n && i < cnt ; i++) {
                $hiddenChildren.eq(i).show();
            }
            return cnt-n;//返回还剩余的隐藏子元素的数量
        }

        //对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
        $(".showMoreNChildren").each(function () {
            var pagesize = $(this).attr("pagesize") || 10;
            var $children = $(this).children();
            if ($children.length > pagesize) {
                for (var i = pagesize; i < $children.length; i++) {
                    $children.eq(i).hide();
                }

                $("<div class='showMorehandle' ><span>显示更多</span></div>").insertAfter($(this)).click(function () {
                    if (showMoreNChildren($children, pagesize) <= 0) {
                        //如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
                        $(this).hide();
                        $('#showMorehandle').show();
                    };
                });
            }
        });
    })();
</script>

</html>


